---
import Image from '~/components/common/Image.astro';
import Button from '~/components/ui/Button.astro';
import type { CallToAction } from '~/types';

import { getImage } from 'astro:assets';

import phone from '../../assets/images/phone.png';
const phoneImage = await getImage({ src: phone });

export interface Props {
  id?: string;
  title?: string;
  subtitle?: string;
  tagline?: string;
  content?: string;
  actions?: string | CallToAction[];
  image?: string | any; // TODO: find HTMLElementProps
}

const {
  id,
  title = await Astro.slots.render('title'),
  subtitle = await Astro.slots.render('subtitle'),
  tagline,
  content = await Astro.slots.render('content'),
  actions = await Astro.slots.render('actions'),
  image = await Astro.slots.render('image'),
} = Astro.props;
---

<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
  <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
  <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
    <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
    <div class="py-12 md:py-20">


      <div class="phone">
        <div class="screen">
          <video
            src="https://v1.keepcdn.com/infra-cms/2021/05/20/17/02/015253971354_.mp4"
            muted
            poster="https://static1.keepcdn.com/2021/05/24/1621830017329_540x816.jpg"
            webkit-playsinline
            playsinline
            x5-video-player-type="h5"
            class="video screen_1"></video>
        </div>
        <div class="phone-mask"></div>
      </div>

    </div>
  </div>
</section>

<style>
  .video-wrapper {
    display: flex;
    justify-content: center;
    padding: 100px 0 0 0;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .video-slide {
    border: 0px blue dotted;
  }

  .phone {
    height: 600px;
    width: 100px;
  }

  .phone .phone-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('https://staticweb.keepcdn.com/staticShow/images/newhome/phone-848d0effca.png') no-repeat
      center/cover;
  }

  .phone .screen {
    position: absolute;
    top: 18px;
    left: 21px;
    right: 21px;
    bottom: 0;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
  }
</style>
<script>
  /*
  import { Swiper } from 'swiper';
  import { Navigation, Pagination, Autoplay, Mousewheel } from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import 'swiper/css/navigation';
  const videoSwiper = new Swiper('.swiper-container', {
    modules: [Navigation, Pagination, Autoplay, Mousewheel],
    direction: 'horizontal',
    loop: false,
    spaceBetween: 30,
    centeredSlides: true,
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
      delay: 18500,
      disableOnInteraction: false,
    },
  });

  videoSwiper.on('transitionStart', () => {
    const videos = document.querySelectorAll('video');
    Array.prototype.forEach.call(videos, function (video) {
      video.pause();
    });
  });

  videoSwiper.on('transitionEnd', () => {
    const activeIndex = videoSwiper.activeIndex;
    const activeSlide = document.getElementsByClassName('video-slide')[activeIndex];
    const activeSlideVideo = activeSlide.getElementsByTagName('video')[0];
    activeSlideVideo.play();
  });
  */
</script>
